import { Component, OnInit,Input } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { MessageAnimation } from './message.animation';


@Component({
  selector: 'el-message-container',
  templateUrl: './message.component.html',
  animations: [MessageAnimation]
})
export class MessageComponent implements OnInit {
  private sanitizer:any;
  private icon:any = {
    error:'',
    info:'',
    success:'',
    warning:'',
  }
  @Input() id: string='';
  @Input() showClose: boolean = false;
  @Input() type: string ='info';
  @Input() center: boolean=false;
  @Input() duration: number=3000;
  @Input() iconClass: string='';
  @Input()  customClass: string='';
  @Input()  zIndex: number=1000;
  @Input() message: string='';
  @Input()  showBox: boolean=false;
  @Input() timer: any;
  @Input() onClose:any  = function () { };
  @Input()  onDestroy:any  = function () { };
  constructor(sanitizer: DomSanitizer){
    this.sanitizer = sanitizer;
  }

  ngOnInit(): void {
  }


  makeTypeClass(){
    return this.type && !this.iconClass ? "el-message__icon el-icon-" + this.type : '';
  }

  makeLink(){
    return this.sanitizer.bypassSecurityTrustUrl(this.icon[this.type]);
  }

  show(message:string){
    var _this = this;
        this.message = message;
        this.showBox = true;
        this.timer = setTimeout(function () {
            _this.close();
        }, this.duration);
  }

  close(){
    this.timer && clearTimeout(this.timer);
        this.showBox = false;
        this.onClose();
        this.onDestroy();
  }

  startTimer(){
    var _this = this;
        if (!this.showBox)
            return;
        this.timer = setTimeout(function () {
            _this.close();
        }, this.duration);
  }

  clearTimer(){
    this.timer && clearTimeout(this.timer);
  }
}
